<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品卡</title>
</head>
<body>
    <input type="text">
    <div class="iphone">
<div id="xinhao">Apple iphone 13(白)</div>
<div id="jiage"> <span>￥5999.00</span></div>
    </div>
    <div class="xiaomi">
        <div id="xh">小米11 ultra 5G</div>
        <div id="jg">￥3999</div>
    
</div>

</body>
<style>
.iphone{
    width: 300px;
    height: 500px;
    background-color: aqua;
    margin-top: 50px;
}
.iphone{
    background-image: url(./iPhone13.webp);
    background-size:300px 400px;
    background-repeat: no-repeat;
    background-position: top;
    transition: box-shadow 0.5s;
    
  
}
.iphone:hover{
    box-shadow: 5px 5px 5px #a5a3a3,5px -5px 5px #a5a3a3,-5px -5px 5px #a5a3a3;
}
#xinhao,#jiage{
text-align:center;
position: relative;
top: 27em;
margin: 0.5em;
}
span{
font-size: 1.5em;
}
#jiage:hover{
    color: red;
}

.xiaomi{
    width: 300px;
    height: 500px;
    background-color: greenyellow;
    margin-top: 50px;
}
.xiaomi{
background-image:url(./小米手机.webp);
    transition: opacity 0.5s;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 300px 400px;

}
.xiaomi:hover{
    border: red 1px solid;
    opacity: 0.4;
}
#jg,#xh{
    position: relative;
    top: 26em;
    text-align: center;
}
.jg{
    font-size: 2em;
}
input:focus{
    background-color:pink;
    outline:green;
}

</style>
</html>